<template>
	<view class="content">
		<div class="pos-rel" v-if="loading">
			<!-- 内容 -->
			<div class="main mt-20 flex" :style="{ paddingTop: 2 * navTop + custom.height + custom.top + 10 + 'px' }">
				<scroll-view style="height: calc(100vh - 20upx);white-space: normal" scroll-y="true" class="mainLeft">
					<div v-for="(item, index) in treeList" :key="index" class="item "
						:class="index === tabIndex ? 'cur' : ''" @click="changeTab(index)">
						<div>{{ item.typeName }}</div>
					</div>
				</scroll-view>
				<scroll-view style="height: calc(100vh - 20upx);white-space: normal;" scroll-y="true"
					class="mainRight ml-20">
					<div class="info">
						<div v-for="(item, index) in treeList[tabIndex].policyDtos" class="item mb-20"
							@click="toDetail(item)">
							<div class="fontS28 fontE2 lh-40 font-500">{{ item.plcTitle }}</div>
							<div class="fontE2 lh-33 fontS24 color-6d mt-16">{{ item.plcContent }}</div>
							<div class="linkBox flex-center mt-14 fontE1 lh-33 fontS24 color-6d">关联链接：<div
									class="fontE1 color-green" style="width: calc(100% - 130upx);">{{ item.plcLink }}
								</div>
							</div>

						</div>
					</div>
				</scroll-view>



			</div>
		</div>

	</view>
</template>

<script>
const App = getApp().globalData;

import {
	findPolicyTreeApp,
} from "@/api/index";



export default {

	data() {
		return {
			params: {
				pageNum: 1,
				pageSize: 10
			},
			list: [],
			treeList: [],
			page: '',
			loading: false,
			tabIndex: 0,
			noteFlag: true

		};
	},
	computed: {
		userInfo() {
			return this.$store.getters.userInfo;
		},
	},
	onReachBottom() {
		this.params.pageNo++;
		if (this.noteFlag) {
			this.getList();
		}
	},
	async onLoad(option) {
		await this.getTreeList()
	},
	methods: {
		changeTab(index) {
			this.tabIndex = index
		},
		// 行业分类
		async getTreeList() {
			const {
				data
			} = await findPolicyTreeApp();
			this.loading = true
			this.treeList = data
		},

		toDetail(item) {
			uni.navigateTo({
				url: `/pages/index/policyDetail?id=${item.plcId}`
			})
		},


	},
};
</script>

<style lang="less" scoped>
page {
	background-color: #f7f7f7 !important;
}

.content {
	height: 100vh;
	overflow-y: auto;

}

.main {

	.mainLeft {
		width: 180upx;
		background-color: #fff;

		.item {
			width: 180upx;
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			position: relative;

			&.cur {
				background: #F7F7F7;
				color: #37AF71;

				&::after {
					content: '';
					background: #39B474;
					position: absolute;
					left: 0;
					height: 48upx;
					width: 6upx;
					top: 0;
					bottom: 0;
					margin: auto 0;
				}
			}
		}
	}

	.mainRight {
		width: calc(100% - 200upx);

		.item {
			background: #fff;
			padding: 20upx;
		}


	}

}


.slectItem {
	padding: 6px 8px;
	background: #E9F8F0;
	color: #37AF71;
}
</style>